<template>
    <div class="m-menu">
      <dl class="nav" @mouseleave='moveleave'>
        <dt>全部分类</dt>
        <dd v-for="(item, index) in $store.state.home.menu" :key="index" @mouseenter="movehover">
          <i :class="item.type"></i> {{item.name}} <span class="arrow"></span>
        </dd>
      </dl>
      <div class="detail" v-if="kind" @mouseenter="clearTime" @mouseleave="kind = ''">
        <template v-for="(item, i) in current.child" >
          <h4 :key="i">{{item.title}}</h4>  
          <span v-for="childs in item.child" :key="childs">
            {{ childs }}
          </span>
        </template>
      </div>
    </div>
</template>
 
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
  // 选项
  kind: string = ''
  // 分类
  list: object[] = [
    {
      type: 'food',
      name: '美食',
      child: [{
        title: '特色',
        child: ['小吃','烧烤']
      }]
    },
    {
      type: 'takeout',
      name: '外卖',
      child: [{
        title: '特色',
        child: ['原味']
      }]
    },
  ]
  timer: number = null
  // 当前
  get current() {
    return this.$store.state.home.menu.filter((item) => {return item['type']===this.kind})[0]
  }
  // 触摸
  movehover(e) {
    this.kind=e.target.querySelector('i').className
  }
  moveleave() {
    this.timer = setTimeout(() => {
      this.kind = ''
    }, 150)
  }
  clearTime() {
    if(this.timer) clearTimeout(this.timer)
  }
}
</script>
<style lang='scss' scoped>
 
</style>